<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<h1>
	<fmt:message key="accounts.search.title" />
</h1>


<c:if test="${not empty accountSearchCriteria.searchString}">
	<div>
		<c:url var="changeSearchUrl" value="accounts/search">
			<c:param name="searchString" value="${accountSearchCriteria.searchString}" />
			<c:param name="maximumResults" value="${accountSearchCriteria.maximumResults}" />
		</c:url>
		<a class="btn btn-info" href="${changeSearchUrl}">
			<fmt:message key="command.changeSearch" />
		</a>
	</div>
</c:if>

<!--  Empty div - account updates message will be written here. -->
<div id="message" class="alert alert-info">
	This should be hidden, so your JavaScript has a syntax error.
</div>

<div>
	<table class="table">
		<thead>
			<tr>
				<th>
					<fmt:message key="label.Account.number" />
				</th>
				<th>
					<fmt:message key="label.Account.name" />
				</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach var="account" items="${accountList}">
			<tr>
				<td>
					<spring:url var="showUrl" value="accounts/{number}">
						<spring:param name="number" value="${account.number}" />
					</spring:url>
					<a href="${showUrl}">${account.number}</a>
				</td>
				<td>
					${account.name}
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	
	<ul class="pager">
		<c:if test="${accountSearchCriteria.page > 0}">
			<li>
				<c:url var="previousUrl" value="accounts">
					<c:param name="searchString" value="${accountSearchCriteria.searchString}" />
					<c:param name="maximumResults" value="${accountSearchCriteria.maximumResults}" />
					<c:param name="page" value="${accountSearchCriteria.page - 1}" />
				</c:url>
				<a id="previousUrl" href="${previousUrl}">
					&lt;&lt;
				</a>			
			</li>
		</c:if>
		<c:if test="${not empty accountList && fn:length(accountList) eq accountSearchCriteria.maximumResults}">
			<li>
				<c:url var="nextUrl" value="accounts">
					<c:param name="searchString" value="${accountSearchCriteria.searchString}" />
					<c:param name="maximumResults" value="${accountSearchCriteria.maximumResults}" />
					<c:param name="page" value="${accountSearchCriteria.page + 1}" />
				</c:url>
				<a id="nextUrl" href="${nextUrl}">
					&gt;&gt;
				</a>				
			</li>
		</c:if>
	</ul>
</div>

<spring:url value="/rewards" var="rewardUrl" />
<script type="text/javascript">
	var stompClient = null;
	
	// On page load, hide the message div (also shows the JavaScript is working)
	$(function() {
		// Hide message div when page loads
		$("#message").hide();
		connect();
	});
	
	/**
	 * Write an account changed message to the message div.
	 */
	function showChangedAccountMessage(data) {
      	$("#message").html("Account " + data.body+" has been credited.");
      	$("#message").fadeIn("fast");
    }

	/**
	 * Subscribe and setup callback to display number of any account that has
	 * changed.
	 */
	function subscribeForAccountModifiedEvents(frame) {
	    console.log('Connected: ' + frame);
	    stompClient.subscribe('/topic/rewards', showChangedAccountMessage);
	}
	
	/**
	 * Setup web-socket and invoke subscribeForAccountModifiedEvents()
	 */
	function connect() {
		// TODO 06: Connect to the web socket endpoint with SockJS
		//          Use the stompClient variable defined above.
		//          Use subscribeForAccountModifiedEvents() as the callback when invoking connect()
	    //          This code is very similar to the code you wrote in create.jsp (TO DO #3)

		// Using the instructions above, write three lines of JavaScript here ...
			
		<%-- TO DO 06 (continued) ...	          
	        Once this is done, redeploy the application
	        
	        Now you need to open 2 tabs (or windows) in an EXTERNAL browser: one to submit
	        the new reward (and thus generate messages), the other to list the accounts (and
	        thus receive the messages).  Navigate to List Accounts in the second tab now.
	
	        Submit a reward in the first tab and you should see that the second tab automatically
	        displays the credited account.
	
	        If that doesn't work, debug with the JavaScript console or ask the instructor.

	        We'll now also update the account details page when the given account is credited.
	        Move on to the next TO DO.
		--%>
	}
</script>

